<template>
    <span @click="clickBtn" class="SwitchButton" v-html="buttons[index].text"></span>
</template>

<script>
    export default {
        name: "SwitchButton",
        props:{
            active:Number,
            buttons:Array,
        },
        data(){
            return{
                index:0,
            }
        },
        methods:{
            clickBtn(){
                let btn=this.buttons[this.index];
                let mtd=btn['method']||'get'
                if(btn.url){
                    axios[mtd](btn.url).then(
                        function(fok, vue){
                            return function(res){
                                if(typeof(fok)=='function')
                                    fok(res);
                                vue.index+=1;
                                if(vue.index>=vue.buttons.length)
                                    vue.index=0;
                            }
                        }(eval(btn.fok), this),
                        eval(btn.ferror)
                    )
                }
            }
        },
        mounted(){
            if(this.active && this.active<this.buttons.length)
                this.index=this.active;
        }
    }
</script>

<style scoped>

</style>